<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="./rx.min.js"></script>
    <title>Title</title>
</head>

<body>


</body>

<script>
    // var vm = {
    //     add: function (x) {
    //         var observable = Rx.Observable.create(function (observer) {
    //             setTimeout(function () {
    //                 console.log(x);
    //                 observer.next(x + 1);
    //             }, 300)
    //         });
    //         return observable;
    //     },
    //     minus: function (x) {
    //         var observable = Rx.Observable.create(function (observer) {
    //             observer.next(x - 1);
    //         });
    //         return observable;
    //     }
    // };



    // vm.add(2)
    //     .concatMap(function (x) {
    //         return vm.add(x)
    //     })
    //     .concatMap(function (x) {
    //         return vm.add(x)
    //     })
    //     .map(function (x) {
    //         return x + 1
    //     })
    //     .subscribe(function (x) {
    //         console.log("最后返回" + x)
    //     });

    var subject = new Rx.Subject();

    console.log(Rx);

    subject.pipe(
        Rx.operators.map((x) => x.toUpperCase(), )
    ).subscribe({
        next: (v) => console.log('observerA: ' + v)
    });

    // subject.subscribe({
    //     next: (v) => console.log('observerA: ' + v)
    // });
    // subject.subscribe({
    //     next: (v) => console.log('observerB: ' + v)
    // });

    subject.next("a");
    subject.next("b");


    var increaseButton = document.querySelector('#increase');
    var increase = Rx.Observable.fromEvent(increaseButton, 'click')
        // 我们再一次映射到一个函数，它会增加 count
        .map(() => state => Object.assign({}, state, {
            count: state.count + 1
        }));

    var decreaseButton = document.querySelector('#decrease');
    var decrease = Rx.Observable.fromEvent(decreaseButton, 'click')
        // 我们还是映射到一个函数，它会减少 count 
        .map(() => state => Object.assign({}, state, {
            count: state.count - 1
        }));

    var inputElement = document.querySelector('#input');
    var input = Rx.Observable.fromEvent(inputElement, 'keypress')
        // 我们还将按键事件映射成一个函数，它会产生一个叫做 inputValue 状态
        .map(event => state => Object.assign({}, state, {
            inputValue: event.target.value
        }));

    // 我们将这三个改变状态的 observables 进行合并
    var state = Rx.Observable.merge(
        increase,
        decrease,
        input
    ).scan((state, changeFn) => changeFn(state), {
        count: 0,
        inputValue: ''
    });

    // 我们订阅状态的变化并更新 DOM
    state.subscribe((state) => {
        document.querySelector('#count').innerHTML = state.count;
        document.querySelector('#hello').innerHTML = 'Hello ' + state.inputValue;
    });

    // 为了优化渲染，我们可以检查什么状态是实际上已经发生变化了的
    var prevState = {};
    state.subscribe((state) => {
        if (state.count !== prevState.count) {
            document.querySelector('#count').innerHTML = state.count;
        }
        if (state.inputValue !== prevState.inputValue) {
            document.querySelector('#hello').innerHTML = 'Hello ' + state.inputValue;
        }
        prevState = state;
    });
</script>

</html>